<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header">
    <meta charset="UTF-8"/>
    <title>CareVault智能医疗研究云平台</title>
    <link rel="stylesheet" href="/css/common/reset.css" th:href="@{/css/common/reset.css}"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" th:href="@{/css/common/bootstrap-min.css}"/>
    <link rel="stylesheet" href="/css/common/zxx.lib.css" th:href="@{/css/common/zxx.lib.css}"/>
    <link rel="stylesheet" href="/css/common/element-ui-2.8.2.css" th:href="@{/css/common/element-ui-2.8.2.css}"/>
    <link rel="stylesheet" href="/css/common/main.css" th:href="@{/css/common/main.css}"/>
    <style> .el-menu {border-right:0;} </style>
</head>

<body>
<div class="header-box navbar" th:fragment="header_box">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" id="oscar-nav-btn" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a th:href="@{/pages/console/index}" class="navbar-brand">
                <div style="color: #bdbdbd; font-size: 20px; font-weight: bold; line-height:26px;">
                    Neusoft - CareVault
                </div>
            </a>
        </div><!-- /navbar-header -->
        <nav class="navbar-collapse collapse" id="bs-nav">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="fix" href="javascript:;">
                        <span class="glyphicon glyphicon-volume-up l mt3" style="top:5px;"></span>
                        <span class="f12 l mt1 ml5">(0)</span>
                    </a>
                </li>
                <li>
                    <a class="glyphicon glyphicon-cog" href="javascript:;"></a>
                </li>
                <li>
                    <a class="f12" href="javascript:;" style="min-width:100px;">
                        <!--
                        <span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"></span>
                        -->
                        <span id="realName"></span>
                        <span class="glyphicon glyphicon-triangle-top oscar-arrow frame-duration"></span>
                        <div class="dada abs ovh">
                            <div class="dada-item">
                                <span class="glyphicon glyphicon-user"></span>
                                <span class="ml5">修改密码</span>
                            </div>
                            <div class="dada-item" id="logout">
                                <form id="login-out-form" action="#" th:action="@{/logout}" method="post" onsubmit="return false;"></form>
                                <span class="glyphicon glyphicon-off"></span>
                                <span class="ml5">退出</span>
                            </div>
                        </div><!-- /dada -->
                    </a>
                </li>
            </ul>
        </nav>
        <div class="dada2 abs ovh f12">
            <!--
            <div class="dada-item">
                <span class="glyphicon glyphicon-user"></span>
                <span class="ml5">个人中心</span>
            </div>
            -->
            <div class="dada-item">
                <span class="glyphicon glyphicon-off"></span>
                <span class="ml5">退出</span>
            </div>
        </div><!-- /dada -->
    </div><!-- /container -->
</div><!-- /header-box -->

<div class="left-sidebar" th:fragment="menu_box (onevar)">
    <a id="menu-toggle-btn" class="abs db el-icon-arrow-left menu-toggle-btn f12 tc" href="javascript:;"></a>
    <input type="hidden" id="defaultActive" th:value="${onevar}"/>
    <div id="menu-box">
        <big-tree default-active="" v-model="menuData"></big-tree>
    </div>
</div><!-- /left-sidebar -->

<div class="row main-container-header" th:fragment="main_container_header (onevar, twovar)">
    <div class="col-md-12 rel">
        <div class="main-container-header-line fix">
            <div class="row">
                <div class="col-xs-6 col-md-6"> <h4 class="g4" th:text="${onevar}"></h4></div>
                <div class="col-xs-6 col-md-6 tr f12">
                    <div class="bread-link-box">
                        当前位置：<span th:utext="${twovar}"></span>
                    </div><!-- /bread-link-box -->
                </div>
            </div><!-- /row -->
        </div><!-- main-container-header-line -->
    </div>
</div><!-- /main-container-header -->

<div th:fragment="javascript_box">
    <script th:src="@{/lib/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/lib/vue-2.6.10.js}"></script>
    <script th:src="@{/lib/vue-resource-1.5.1.js}"></script>
    <script th:src="@{/lib/element-ui.js}"></script>
    <script th:inline="javascript">
    /*<![CDATA[*/
        Vue.http.options.root = [[${contextPath}]] == null ? '' : [[${contextPath}]];
        // 设拦截器，添加头部信息
        Vue.http.interceptors.push(function(request, next) {
            request.headers.set('XAuthorization', 'Bearer ' + Carevault.getToken());
            next(response => {
                if (response.status === 401) {
                    window.location.href = Vue.http.options.root + '/ajax/login';
                }
                return response;
            });
        });
    /*]]>*/
    </script>
    <script th:src="@{/lib/menu-data.js}"></script>
    <script th:src="@{/lib/layout.js}"></script>
    <script th:src="@{/lib/codelist.js}"></script>
    <script>
        ;(function () {
            new Vue({
                el: '#menu-box',
                data () {
                    return {
                        menuData: [],
                        userData: null,
                    };
                },

                created () {
                    // 设置全局用户名
                    if (window.location.href.search('login') != -1 || window.location.href.search('confirm/view') != -1) return;
                    if (!Carevault.getItem('name') || Carevault.getItem('name') == '') {
                        this.myGet('/auth/me')
                        .then(function (res) {
                            this.userData = res.data;

                            // 用户菜单
                            if (JSON.stringify(this.userData.roles).search('ROLE_ADMIN') != -1) { // 管理员
                                this.menuData = menuData.console;
                            } else { // 普通用户
                                this.menuData = menuData.user;
                            }

                            Carevault.setItem('roles', JSON.stringify(this.userData.roles));
                            Carevault.setItem('name', this.userData.name, 1);
                            $('#realName').html(this.userData.name);
                        })
                        .catch(function (err) {
                            console.info(err);
                        });
                    } else {
                        $('#realName').html(Carevault.getItem('name'));
                        if (Carevault.getItem('roles').search('ROLE_ADMIN') != -1) {
                            this.menuData = menuData.console;
                        } else {
                            this.menuData = menuData.user;
                        }
                    }
                },

            });
        }) ();

        // 注销功能
        ;(function () {
            setTimeout(function () {
                $('#logout').click(function () {
                    sessionStorage.removeItem('token');
                    sessionStorage.removeItem('token-expired');
                    sessionStorage.removeItem('name');
                    sessionStorage.removeItem('roles');
                    $('#login-out-form')[0].submit();
                });
            }, 1000);
        }) ();
    </script>
</div>
</body>
</html>
